<template>
  <div class="login-page">
    <div class="login-from-body">
      <h3 class="login-title">用户登录</h3>
      <el-form :model="loginFrom" :rules="loginRules" ref="loginFrom" label-width="0px" class="demo-ruleForm" @submit.native.prevent>
        <el-form-item prop="username">
          <el-input v-model="loginFrom.username">
            <i slot="prefix" class="login-user-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" :show-password="true" v-model="loginFrom.password">
            <i slot="prefix" class="login-pass-icon"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-button" native-type="submit" @click="submitLogin">登录</el-button>
        </el-form-item>
      </el-form> 
      <span class="visitor-login-btn" @click="VisitorLogin">游客登录</span>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      loginFrom: {
        username: '',
        password: ''
      },
      loginRules: {
        username:[ { required: true, message: '请输入登录账户', trigger: 'blur' }, ],
        password: [ { required: true, message: '请输入登录密码', trigger: 'blur' } ]
      }
    }
  },
  methods: {
    // 游客登录
    VisitorLogin() {
      this.$store.dispatch('user/VisitorLogin').then(()=>{
        this.$router.push({
          path: '/web'
        })
      })
    },
    submitLogin() {
      const vm = this;
      vm.$refs['loginFrom'].validate((valid)=>{
        if(valid) {
          vm.$store.dispatch('user/accountLogin',vm.loginFrom).then((res)=>{
            if (res.code === '20000') {
              vm.$message.success('登录成功');
              vm.$router.push({
                path: '/web'
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login-page {
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 1024px;
  width: 100%;
  height: 100%;
  display: flex;
  background: #333;
  background-image: url(/imgs/login_bg.jpg);
  background-attachment: fixed;
  background-size: 100% 100%;
  .login-from-body {
    position: relative;
    width: 300px;
    height: 300px;
    left: 58%;
    top: 25%;
    .login-title {
      margin: 0;
      margin-bottom: 40px;
      font-weight: 500;
      color: #409eff;
    }
  }
}
.login-user-icon, .login-pass-icon {
  display: inline-block;
  height: 40px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  line-height: 40px;
}
.login-user-icon {
  width: 16px;
  background-image: url(/imgs/personne_managementl_icon.png);
}
.login-pass-icon {
  width: 22px;
  background-image: url(/imgs/password_icon.png);
}
.login-button {
  width: 100%;
}
.visitor-login-btn {
  margin: 0;
  color: #409eff;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}
</style>